<template>
  <div class="richTextEditor">
    <div style="border: 1px solid #ccc">
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
        mode="default" />
      <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default"
        @onCreated="handleCreated" @onChange="Echange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import "@wangeditor/editor/dist/css/style.css"; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, toRefs } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

import { debounce } from "../hooks/index";
import { getArticleApi } from '../service/apiModule/articleApi'

const emit = defineEmits(["articleText"]);

const props = defineProps({
  id: {
    type: String,
    default: ''
  }
})
const { id } = toRefs(props)

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref<any>("");

onMounted(() => {
  getArticle()
})

// 获取文章
const getArticle = async () => {
  const { data: res } = await getArticleApi({ id: id.value })
  valueHtml.value = res.data.articleContent
}

// 工具栏配置
const toolbarConfig = {};
// 编译器配置
const editorConfig = {
  placeholder: "请输入内容...",
};

const handleCreated = (editor: any) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

const Echange = debounce((editor: any) => {
  const html = editor.getHtml();
  // console.log("输出--->", html);
  emit("articleText", html);
}, 600);

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<style lang="scss" scoped>
.richTextEditor {
  color: orange;
}
</style>
